<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>同事
            <ul>
                <li>马云</li>
                <li>马化腾</li>
                <li>马宝国</li>
            </ul>
        </li>
        <li>亲戚
            <ul>
                <li>习大大</li>
                <li>马大姐</li>
                <li>老干妈</li>
            </ul>
        </li>
        <li>同学
            <ul>
                <li>周杰伦</li>
                <li>刘德华</li>
                <li>郭富城</li>
            </ul>
        </li>
    </ul>
    <!--引入一个jQuery框架-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
        //得到所有第二层的ul并隐藏
        $("li>ul").hide();
        //给第一层的li添加点击事件
        $("body>ul>li").click(function () {
            //找到点击里的li里面的ul  让其显示和隐藏切换
            $(this).children().toggle();
            //得到点击li以外的两个li里面的ul，并隐藏
            $(this).siblings().children().hide();
        });
    </script>
</body>
</html>